.bin-card {
  border-radius: var(--bin-border-base-radius);
  border: var(--bin-border-base-light);
  background-color: #fff;
  transition: var(--bin-animation-duration-base);
  width: 100%;
  &.is-always-shadow, &.is-hover-shadow:focus, &.is-hover-shadow:hover {
    box-shadow: var(--bin-shadow-popper);
  }
  &.is-never-shadow, &.is-never-shadow:focus, &.is-never-shadow:hover {
    box-shadow: none;
  }
  &.is-no-border {
    border: none;
  }
  .bin-card__header {
    padding: 10px 16px;
    box-sizing: border-box;
    font-size: var(--bin-base-font-size);
    color: var(--bin-color-text-primary);
    font-weight: 500;
    &.has-divider {
      border-bottom: var(--bin-border-base-light);
    }
    &.no-divider {
      border-bottom: none;
    }
    &.has-tip {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 2px;
        background: var(--bin-color-primary);
      }
    }
  }
  .bin-card__body {
    padding: 16px;
  }
}
